<template>
    <span class="dictionary">{{ dictionary }}</span>
</template>

<script>
export default {
    name: 'FieldTag',
    props: {
        value: {
            type: Number | String,
            default: ''
        },
        type: {
            type: Number | String,
            default: ''
        },
        showType: {
            type: Number | String,
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dictionary: ''
        };
    },
    created() {
        this.findDictionary();
    },
    watch: {
        value() {
            this.findDictionary();
        }
    },
    methods: {
        findDictionary() {
            let dictionary = '';
            if (this.type && this.data.length) {
                let getItem = this.data.find(item => item[this.type] == this.value);
                dictionary = getItem[this.showType] || '';
            }
            this.dictionary = dictionary;
        }
    }
};
</script>
<style lang="scss" scoped>
.dictionary {
    font-size: 13px;
    // color: #333;
}
</style>
